<template>
   <view>
      <u-navbar title="菜单中心" autoBack fixed placeholder></u-navbar>
      <view class="content">
         <view class="item" v-for="menus in items" :key="menus.label">
            <view class="item_title">{{ menus.label }}</view>
            <u-grid :col="4">
               <u-grid-item v-for="item in menus.children" :key="item.text" @click="goItem(item)">
                  <view class="icon_wrap">
                     <image :src="item.src"></image>
                  </view>
                  <text style="color: #888888;font-size: 12px;">{{item.text}}</text>
               </u-grid-item>
            </u-grid>
         </view>
      </view>
   </view>
</template>

<script>
   import data from '@/common/data.js'
   export default {
      data() {
         return {
            items: []
         }
      },
      created() {
        this.items = data.menus
        console.log(this.items);
      },
      methods: {
         goItem(item) {
            if(item.isLink) {
               uni.navigateTo({
                  url: item.url
               })
            }else if(!item.isLink && item.type == 'scan') {
               uni.scanCode({
                  onlyFromCamera: true,
                  scanType: ['qrCode'],
                  success: ({ result, scanType, charSet, path }) => {
                     
                  },
                  fail: (error) => {

                  }
               })
            }
         }
      }
   }
</script>

<style lang="scss" scoped>
   .content {

      .item {
         width: auto;
         margin: 10px;
         background-color: #ffffff;
         border-radius: 8px;
         padding-bottom: 10px;

         &_title {
            padding: 10px 0 5px 15px;
            font-size: 14px;
            font-weight: bold;
         }
      }

      .icon_wrap {
      	display: flex;
      	justify-content: center;
      	align-items: center;
      	width: 48px;
      	height: 48px;
      	border-radius: 50%;
      	margin-top: 5px;
      	
      	image {
      		display: block;
      		width: 48px;
      	   height: 48px;
      	}
      }
   }
</style>
